<template>
  <div>
    <a-input v-if="type === 'text'" ref="input" v-model:value="searchValue" @blur="handleBlur" />
    <a-select
      v-else-if="type === 'select'"
      :get-popup-container="node => node.parentNode"
      placeholder="请选择"
      v-model:value="searchValue"
      @dropdownVisibleChange="handleDropdownVisibleChange"
      @change="handleSelectChange"
    >
      <a-select-option v-for="(item, rangeIndex) in selectOptions" :key="rangeIndex" :value="item.value">
        <svg-icon v-if="item.icon" :type="item.icon" class="svg-icon" />
        {{ item.title }}
      </a-select-option>
    </a-select>
    <a-tree-select
      v-else-if="type === 'treeSelect'"
      v-model:value="searchValue"
      :tree-data="selectOptions"
      placeholder="请选择"
      tree-default-expand-all
      @dropdownVisibleChange="handleDropdownVisibleChange"
      @change="handleSelectChange"
    />
    <a-date-picker
      v-else-if="type === 'date'"
      format="YYYY-MM-DD"
      valueFormat="YYYY-MM-DD"
      v-model:value="searchValue"
      :show-time="optionData.showTime"
      @change="handleDatePickerChange"
    />
    <a-date-picker
      v-else-if="type === 'dateTime'"
      format="YYYY-MM-DD HH:mm:ss"
      valueFormat="YYYY-MM-DD HH:mm:ss"
      v-model:value="searchValue"
      show-time
      @change="handleDatePickerChange"
    />
    <a-date-picker
      v-else-if="type === 'month'"
      v-model:value="searchValue"
      picker="month"
      format="YYYY-MM"
      valueFormat="YYYY-MM"
      @change="handleDatePickerChange"
    />
    <a-range-picker
      v-else-if="type === 'dateSection'"
      v-model:value="searchValue"
      format="YYYY-MM-DD"
      valueFormat="YYYY-MM-DD"
      @change="handleDatePickerChange"
    />
  </div>
</template>

<script>
  import { defineComponent, watch, ref } from 'vue'
  import dayjs from 'dayjs'
  import { isEmptyArr } from '@/utils/is'

  export default defineComponent({
    name: 'SearchComponent',
    props: {
      type: {
        type: String,
        default: 'text'
      },
      optionData: {
        type: Object,
        default: () => {
          return {}
        }
      },
      dataSourceId: {
        type: Number
      },
      fieldId: {
        type: String
      },
      getPageColumnValue: {
        type: Function
      },
      value: {
        type: Object
      }
    },
    emits: ['change'],
    setup(props, { emit }) {
      const selectOptions = ref([])
      const handleDatePickerChange = (_, dateString) => {
        emit('change', dateString)
      }
      const searchValue = ref('')
      const handleBlur = event => {
        const newValue = event.target.value
        emit('change', newValue)
      }
      const handleDropdownVisibleChange = () => {
        const param = {
          pageId: props.dataSourceId, // 表单id
          filter: {},
          pageSize: 200, // 分页
          pageNo: 1, // 分页
          sort: {},
          end: false,
          field: props.fieldId // 获取的列
        }
        if (!isEmptyArr(selectOptions.value)) {
          return
        }
        props.getPageColumnValue(param).then(res => {
          const optionList = []
          res.data.dataList.forEach(info => {
            optionList.push({
              title: Array.isArray(info[props.fieldId]) ? info[props.fieldId][0].label : info[props.fieldId],
              value: Array.isArray(info[props.fieldId]) ? info[props.fieldId][0].label : info[props.fieldId]
            })
          })
          selectOptions.value = optionList
        })
      }
      const handleSelectChange = newValue => {
        emit('change', newValue)
      }
      watch(
        () => props.value,
        newValue => {
          if (props.optionData.fieldType === 'date' && newValue) {
            newValue = dayjs(newValue)
          } else if (props.optionData.fieldType === 'dateSection' && newValue[0] && newValue[1]) {
            newValue = [dayjs(newValue[0]), dayjs(newValue[1])]
          }
          searchValue.value = newValue
        }
      )
      return {
        selectOptions,
        searchValue,
        handleBlur,
        handleDatePickerChange,
        handleSelectChange,
        handleDropdownVisibleChange
      }
    }
  })
</script>
